<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-注册事件方式2</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        总结
            a. 注册的事件如果不带小括号，可以直接在事件函数中通过形参获取事件对象
            b. 如果事件函数注册时加了括号，事件对象就获取不到了
            c. 加括号调用的目的肯定为了传参，那么事件函数的形参和实参也是一一对应的
            d. 如果又想传参，又希望使用事件对象，可以实参传入一个 $event 的对象
     -->
    <div id="app">
        <div class="container">
            <h3>注册事件的方式-事件对象</h3>
            <!-- 不加括号的情况下，是可以直接获取事件对象的 -->
            <!-- <span class="btn btn-success" @click="demo">点击事件</span> -->
            <!-- 1.0 如果事件名称加了括号，那么事件对象默认接收不到 -->
            <span class="btn btn-success" @click="fn(100, true)">点击事件</span>
            <!-- 2.0 通过 $event 进行传参 -->
            <span class="btn btn-success" @click="fn1($event, 100)">点击事件</span>

            <!-- 这种($event)写法，有点儿多此一举，因为还不如不写，也能获取到事件对象 -->
            <!-- <span class="btn btn-success" @click="fn1($event)">点击事件</span> -->
            <!-- <span class="btn btn-success" @click="e => fn1(e, 100)"></span> -->
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello !'
            },
            methods: {
                demo(e) {
                    console.log(e) // 事件对象
                },
                // 事件处理程序的函数中，通过形参的方式接收事件对象
                fn(event, bool) {
                    // console.log(window.event)
                    // console.log('----', event, bool)
                },
                fn1(e, n) {
                    console.log('>>>>>', e, n)
                }
            }
        })

        console.log(vm)
    </script>
</body>
</html>